<template>
  <div class="new-hot-goods">
    <nav-bar title="商品列表"></nav-bar>
    <img
      class="banner"
      src="http://yanxuan.nosdn.127.net/8976116db321744084774643a933c5ce.png"
      alt=""
    />
    <div class="sort-nav">
      <span
        :class="{
          active: active == item,
          price: item == '价格',
          desc: sort == 'desc',
          asc: sort == 'asc',
        }"
        @click="activeNav(item)"
        v-for="(item, index) in navList"
        :key="index"
        >{{ item }}</span
      >
    </div>
    <div class="goods-list">
      <ul class="list">
        <li class="item" v-for="(item, index) in goodsList" :key="index">
          <img :src="item.list_pic_url" alt="" />
          <p class="title">{{ item.name }}</p>
          <p class="price">￥{{ item.retail_price }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getNewAndHotGoodsInfo } from "@/api/pages/new-hot-goods";
import NavBar from "@/components/common/nav-bar";
export default {
  data() {
    return {
      type: this.$route.query.type,
      active: "综合",
      navList: ["综合", "价格", "分类"],
      sort: "desc",
      goodsList: [],
    };
  },
  methods: {
    getData(type) {
      let isNew = 0;
      let isHot = 0;
      if (type == "isNew") {
        isNew = 1;
        isHot = "";
      } else if (type == "isHot") {
        isNew = "";
        isHot = 1;
      } else {
        isNew = 1;
        isHot = 1;
      }
      getNewAndHotGoodsInfo({ order: this.sort, isNew, isHot }).then((res) => {
        console.log(res);
        this.goodsList = res.data;
      });
    },
    activeNav(item) {
      if (item == "价格") {
        this.sort = this.sort === "desc" ? "asc" : "desc";
        this.getData(this.type);
      } else {
        this.getData();
      }
      this.active = item;
    },
  },
  created() {
    this.getData(this.type);
  },
  components: {
    "nav-bar": NavBar,
  },
};
</script>

<style lang="scss" scoped>
.new-hot-goods {
  .banner {
    width: 100%;
    height: 140px;
  }
  .sort-nav {
    height: 40px;
    width: 100%;
    background-color: #fff;
    span {
      display: inline-block;
      width: 33%;
      line-height: 40px;
      text-align: center;
    }
    .price {
      background: url("http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/no-3127092a69.png")
        no-repeat;
      background-position: 80px 15px;
    }
    .active.price.asc {
      background: url("http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/up-636b92c0a5.png")
        no-repeat;
      background-position: 80px 15px;
    }
    .active.price.desc {
      background: url("http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/down-95e035f3e5.png")
        no-repeat;
      background-position: 80px 15px;
    }
    span.active {
      color: #b4282d;
    }
  }

  .goods-list {
    margin-top: 15px;
    width: 100%;
    .list {
      width: 100%;
      .item {
        float: left;
        width: 50%;
        height: 225px;
        border-right: 1px solid #d9d9d9;
        border-bottom: 1px solid #d9d9d9;
        text-align: center;
        box-sizing: border-box;
        background: #fff;
        img {
          display: block;
          margin: 0 auto;
          width: 150px;
          height: 150px;
        }
        .price {
          margin-top: 15px;
          font-size: 14px;
          color: #b4282d;
        }
      }
    }
  }
}
</style>